<template>
  <div>
    <input value="任务类别管理" hidden>
    <div style="background-color:#2b313e ;height: 50px">
      <el-row style="float:left">
        <el-button type="primary" style="vertical-align:middle;margin-top:10px;margin-left: 5px" round size="mini">新增</el-button>
        <el-button type="warning" style="vertical-align:middle;margin-top:10px;" round size="mini" @click="">停用</el-button>
        <el-button type="success" style="vertical-align:middle;margin-top:10px;" round size="mini" @click="">启用</el-button>
        <el-button type="danger" style="vertical-align:middle;margin-top:10px;" round size="mini" @click="">删除</el-button>
      </el-row>

      <el-input style="width: 300px;margin-left: 10px;margin-top: 5px;"
                placeholder="任务类别名称"
                v-model="taskTypeName">
        <el-button slot="append" @click="queryByTaskTypeName(taskTypeName)" icon="el-icon-search" style="background-color:#1d2331;color: blue;height: 33.99px"></el-button>
      </el-input>
    </div>
    <div class="data-wrapper">
      <template v-if="tableData3!=null">
        <el-table ref="multipleTable" :data="tableData3"  tooltip-effect="dark" style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection" label="全选" width="55">
          </el-table-column>
          <el-table-column type="index" label="序号" :index="indexMethod">
          </el-table-column>
          <el-table-column prop="name" label="事件类型" sortable width="180">
          </el-table-column>
          <el-table-column prop="username" width="150" label="上报人">
          </el-table-column>
          <el-table-column prop="website" label="所属河道" sortable width="120">
          </el-table-column>
          <el-table-column prop="email" label="河长" sortable width="120">
          </el-table-column>
          <el-table-column prop="phone" label="事件来源">
          </el-table-column>
          <el-table-column prop="address.suite" label="当前状态">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-row style="float:left">
                <el-button
                        size="small" type="primary" style="width:45px;padding-left: 10px" @click="handleView(scope.$index, scope.row)">查看</el-button>
                <el-button
                        size="small" type="success" style="width:45px;padding-left: 10px" @click="updateTaskTypeNameFlag = true">修改</el-button>
                <el-button
                        size="small" type="danger" style="width:45px;padding-left: 10px" @click="deleteTaskTypeName(scope.$index)">删除</el-button>
              </el-row>

              <el-dialog title="收货地址" :visible.sync="updateTaskTypeNameFlag">
                <el-form :model="form">
                  <el-form-item label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" auto-complete="off"></el-input>
                  </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="updateTaskTypeNameFlag = false">取 消</el-button>
                  <el-button type="primary" @click="updateTaskTypeName('123')">确 定</el-button>
                </div>
              </el-dialog>

            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <el-row :gutter="20" type="flex" justify="space-between" align="center" class="page-wrapper">
      <el-col :span="24">
        <div class="page-item">
          <el-pagination background  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="40"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import axios from 'axios';
  export default {
    data(){
      return {
        taskTypeName:'',
        tableData3:null,
        listQuery: {
          baseUrl:`http://jsonplaceholder.typicode.com/users`,
        },
        multipleSelection: [],
        currentPage4: 4,
        formLabelWidth: '120px',
        updateTaskTypeNameFlag: false,
        form:{
          name:'你好',
          email:'',

        }
      }
    },
    created() {
      this.getList(this.listQuery.baseUrl)
    },
    methods:{
      getList(url) {
        axios.get(url).then((response)=>{
          //相应的正确数据
          console.log(response)
          this.tableData3=response.data
        }).catch((error)=>{
          //错误信息
          console.log(error)
        })
      },
      //搜索功能
      queryByTaskTypeName(val){
        console.log(this.listQuery.baseUrl+'?name='+val)
        this.getList(this.listQuery.baseUrl+'?name='+val)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      indexMethod(index) {
        return index+1;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      //查看操作
      handleView(index, row){
        console.log(index, row);
      },
      //删除
      deleteTaskTypeName(val){
        console.log(val);
      },
      //修改
      updateTaskTypeName(val){
        console.log(val);
      }
    }
  }
</script>



